<template>
  <interval height="120" />
  <showcase
    v-for="(item, index) in sheetList"
    :key="item.id"
    name="likeSheet"
    :title="item.name"
    :caseList="sheetSongList[index]"
    :isSong="true"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

import Interval from '@/components/interval/interval.vue'
import showcase from '@/components/showcase/showcase.vue'

export default defineComponent({
  components: { Interval, showcase },
  async setup() {
    const store = useStore()
    await store.dispatch('sheet/getSheetListAction')
    const sheetList = store.state.sheet.sheetList
    const sheetSongList: any[] = []

    for (let i = 0; i < sheetList.length; i++) {
      await store.dispatch({
        type: 'details/getsheetDetailAction',
        id: sheetList[i].id
      })
      sheetSongList[i] = store.state.details.sheetDetail.tracks
    }

    return { sheetList, sheetSongList }
  }
})
</script>

<style scoped>
div {
}
</style>
